<template>
  <div class="main">
    <govheader :title="title"></govheader>
    <govnavigation></govnavigation>
    <el-row class="content" :gutter="10" style="margin: 0">
      <el-col :span="7" class="content-left">
        <el-col class="box">
          <div class="title">园区整体情况</div>
          <div class="content-body">
            <el-row type="flex" justify="space-around" class="rightTop">
              <el-col :span="10" class="rightTopBox">
                <div>园区企业数</div>
                <div>{{ integrity.entCount }}</div>
              </el-col>
              <el-col :span="10" class="rightTopBox">
                <div>规上企业数</div>
                <div>{{ integrity.standEntCount }}</div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-around" class="rightTop">
              <el-col :span="10" class="rightTopBox">
                <div>营收(亿元)</div>
                <div>{{ integrity.parkMainIncome }}</div>
              </el-col>
              <el-col :span="10" class="rightTopBox">
                <div>税收(亿元)</div>
                <div>{{ integrity.parkActualTax }}</div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-around" class="rightTop">
              <el-col :span="10" class="rightTopBox">
                <div>占地面积(亩)</div>
                <div>{{ integrity.parkArea }}</div>
              </el-col>
              <el-col :span="10" class="rightTopBox">
                <div>从业人数</div>
                <div>{{ integrity.parkPersonQty }}</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title">亩均发展趋势</div>
          <div class="content-body">
            <div class="tabs">
              <div
                :class="active === 0 ? 'selectActive' : ''"
                @click="activeClick(0)"
              >
                营收
              </div>
              <div
                :class="active === 1 ? 'selectActive' : ''"
                @click="activeClick(1)"
                style="border-left: 1px solid #7db2d0"
              >
                税收
              </div>
              <div
                :class="active === 2 ? 'selectActive' : ''"
                @click="activeClick(2)"
                style="border-left: 1px solid #7db2d0"
              >
                亩均税收
              </div>
              <div
                :class="active === 3 ? 'selectActive' : ''"
                @click="activeClick(3)"
                style="border-left: 1px solid #7db2d0"
              >
                亩均增加值
              </div>
            </div>
            <div id="development" style="width: 100%; height: 194px"></div>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title">园区企业名录</div>
          <div class="content-body">
            <div id="tableColor">
              <el-table
                :data="tableData"
                style="width: 100%"
                height="289"
                :row-style="{ height: '0' }"
                :cell-style="{ padding: '6px 0' }"
                stripe
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  property="entName"
                  :show-overflow-tooltip="true"
                  label="企业名称"
                ></el-table-column>
                <el-table-column
                  property="isStandardsized"
                  :show-overflow-tooltip="true"
                  label="是否规上"
                  width="80"
                  align="center"
                ></el-table-column>
                <el-table-column
                  property="isHzEnterpeies"
                  :show-overflow-tooltip="true"
                  label="是否危化品企业"
                  width="130"
                  align="center"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-col>
      <el-col
        :span="10"
        class="content-center"
        style="background-color: (255, 255, 255, 0.5)"
      >
        <div class="left_baidu" style="overflow: hidden">
          <div v-if="parkCode === 'ZJYQ-330182-01'" class="goback" style="top: 45px;" @click="gozhihui()">智慧园区管理平台</div>
          <div class="goback" @click="goback()" style="top: 10px;">园&nbsp;区&nbsp;总&nbsp;览</div>
          <div class="intrdouce">
                <div class="legend-body" @click="searchPark('enterprise')"
                  :style="{ background: selectLegend === 'enterprise' ? '#D6E6FF' : 'none' }">
                  <img class="legend-icon" src="@/assets/img/zf/enterprise-color.png" alt="" width="20px" height="20px">
                  <div class="legend-title" style="color: rgb(0, 219, 212)">企业</div>
                </div>
                <div class="legend-body" @click="searchPark('monitor')"
                  :style="{ background: selectLegend === 'monitor' ? '#D6E6FF' : 'none' }">
                  <img class="legend-icon" src="@/assets/img/zf/monitor-color.png" alt="" width="20px" height="20px">
                  <div class="legend-title" style="color: rgb(101, 215, 123)">监控</div>
                </div>
                <div class="legend-body" @click="searchPark('eagleEye')"
                  :style="{ background: selectLegend === 'eagleEye' ? '#D6E6FF' : 'none' }">
                  <img class="legend-icon" src="@/assets/img/zf/eagle-color.png" alt="" width="20px" height="20px">
                  <div class="legend-title" style="color: rgb(95, 131, 255)">鹰眼</div>
                </div>
                <div class="legend-body" @click="searchPark('airMonitoring')"
                  :style="{ background: selectLegend === 'airMonitoring' ? '#D6E6FF' : 'none' }">
                  <img class="legend-icon" src="@/assets/img/zf/air-color.png" alt="" width="20px" height="20px">
                  <div class="legend-title" style="color: rgb(168, 133, 240)">大气监测</div>
                </div>
                <div class="legend-body" @click="searchPark('waterMonitoring')"
                  :style="{ background: selectLegend === 'waterMonitoring' ? '#D6E6FF' : 'none' }">
                  <img class="legend-icon" src="@/assets/img/zf/water-color.png" alt="" width="20px" height="20px">
                  <div class="legend-title" style="color: rgb(0, 163, 255)">水监测</div>
                </div>
                <div class="legend-body" @click="searchPark('emergencySupplies')"
                  :style="{ background: selectLegend === 'emergencySupplies' ? '#D6E6FF' : 'none' }">
                  <img class="legend-icon" src="@/assets/img/zf/emergency-color.png" alt="" width="20px" height="20px">
                  <div class="legend-title" style="color: rgb(255, 140, 47)">应急物资</div>
                </div>
              </div>
          <baidu-map
            :center="center"
            :zoom="zoom"
            @ready="handler"
            style="height: 770px; width: 100%; z-index: 10"
            @click="getClickInfo"
            :scroll-wheel-zoom="true"
          >
            <bm-map-type
              :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
              anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
            ></bm-map-type>
          </baidu-map>
        </div>
      </el-col>
      <el-col
        :span="7"
        class="content-center"
        style="background-color: (255, 255, 255, 0.5)"
      >
        <el-row>
          <el-col class="box">
            <div class="title">园区产业分布</div>
            <div class="content-body">
              <div
                id="distribution"
                style="width: 40%; float: left; height: 160px"
              ></div>
              <ul style="width: 60%; float: left" class="ulList">
                <li>
                  <div>主导产业</div>
                  <div>{{ industryName }}</div>
                </li>
                <li>
                  <div>主导产业企业数</div>
                  <div>{{ entCount }}</div>
                </li>
                <li>
                  <div>主导产业规上企业数</div>
                  <div>{{ standardEntCount }}</div>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="box">
            <div class="title">园区安全概览</div>
            <div class="content-body">
              <div
                id="workmanship1"
                style="width: 50%; float: left; height: 164px"
              ></div>
              <div
                id="source1"
                style="width: 50%; float: left; height: 164px"
              ></div>
              <el-row class="securityBottom">
                <el-col :span="8">
                  <div>危化品企业数</div>
                  <div>{{dangerChemicalsEntCount}}</div>
                </el-col>
                <el-col :span="8" class="securityBottomCenter">
                  <div>危化品车辆</div>
                  <div>{{carCount}}</div>
                </el-col>
                <el-col :span="8">
                  <div>危化品种类</div>
                  <div>{{chemicalTypeCount}}</div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-row>
              <el-col class="box">
                <div class="title">园区环保概览</div>
                <div class="content-body" style="margin-top: 8px;height:200px">
                  <ul>
                    <li
                      class="overview"
                      v-for="(item, index) in overviewArr"
                      :key="index"
                    >
                      <img src="../../../assets/img/zf/5.png" alt="" />
                      <span style="margin-left: 10px">{{ item.monitoringTypeName }}</span>
                      <span style="float: right; color: #00a3ff">{{
                        item.monitoringCount
                      }}个</span>
                    </li>
                  </ul>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col class="box">
                <div class="title">园区能源概览</div>
                <div class="content-body">
                  <div id="survey1" style="width: 100%; height: 193px"></div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map'
import Vue from 'vue'
const echarts = require('echarts')
import govheader from '@/components/govheader'
import govnavigation from '@/components/govnavigation'
Vue.use(BaiduMap, {
  ak: 'vZi9dnlQaFQ3LYO8yOdeHjaGjwGWGHy4'
})
export default {
  name: 'zfParkOverviewDetail',
  components: { govheader, govnavigation },
  data () {
    return {
      parkName: '',
      parkCode: '',
      year: '',
      title: '',
      integrity: {
        parkIndex: '', // 园区指数
        entCount: '', // 园区企业数
        standEntCount: '', // 规上企业数
        parkMainIncome: '', // 营收
        parkActualTax: '', // 税收
        parkArea: '', // 占地面积
        parkPersonQty: '' // 从业人数
      },
      jiankuohao: '<',
      eagleEyeUrl: '',
      industryName: '',
      entCount: '',
      standardEntCount: '',
      parkProductsDistribution: [],
      dangerChemicalsEntCount: '',
      carCount: '',
      chemicalTypeCount: '',
      tableData: [],
      overviewArr: [],
      active: 0,
      myChart1: '',
      option1: '',
      xAxisData1: [],
      optionData1: [],
      myChart2: '',
      option2: '',
      myChart3: '',
      option3: '',
      myChart4: '',
      option4: '',
      myChart5: '',
      option5: '',
      center: { lng: 119.501611, lat: 29.483372 },
      selectLegend: 'enterprise',
      enterpriseList: [],
      monitorList: [],
      eagleEyeList: [],
      airMonitoringList: [],
      waterMonitoringList: [],
      emergencySuppliesList: [],
      map: '',
      zoom: 12
    }
  },
  created () {
    this.parkName = this.$route.query.parkName
    this.parkCode = this.$route.query.parkCode
    this.year = this.$route.query.year
    this.center.lng = this.$route.query.longitude
    this.center.lat = this.$route.query.latitude
  },
  mounted () {
    this.getDevelopment()
    this.getDistribution()
    this.getWorkmanship()
    this.getSource()
    this.getSurvey()
    this.$nextTick(() => {
      this.$http
        .post(`/home/government/govParkOverview/getParkOverviewDetail`, {
          searchYear: this.year,
          parkName: this.parkName,
          parkCode: this.parkCode
        })
        .then(({ data: res }) => {
          this.title = res.data.title
          this.integrity = res.data.integrity
          this.incomeList = res.data.perMuDevelopment.incomeList
          this.taxList = res.data.perMuDevelopment.taxList
          this.perMuTaxList = res.data.perMuDevelopment.perMuTaxList
          this.perMuAddList = res.data.perMuDevelopment.perMuAddList
          this.option1.xAxis[0].data = res.data.perMuDevelopment.yearList
          this.option1.series[0].data = this.incomeList
          this.tableData = res.data.parkEntDirectories.map(item => {
            return {
              entName: item.entName,
              isStandardsized: item.isStandardsized ? '是' : '否',
              isHzEnterpeies: item.isHzEnterpeies ? '是' : '否'
            }
          })
          this.industryName = res.data.parkProductsDistribution[0].industryName
          this.entCount = res.data.parkProductsDistribution[0].entCount
          this.standardEntCount = res.data.parkProductsDistribution[0].standardEntCount
          this.option2.series[0].data = res.data.parkProductsDistribution.map(
            (item) => {
              return {
                value: item.entCount,
                name: item.industryName
              }
            }
          )
          this.option3.series[0].data = res.data.parkSafe.dangerChemicalTech.map(item => {
            return {
              name: item.technologyTypeName,
              value: item.technologyCount
            }
          })
          this.option4.series[0].data = res.data.parkSafe.dangerSource.map(item => {
            return {
              name: item.dataSourceLevel,
              value: item.dataSourceCount
            }
          })
          this.dangerChemicalsEntCount = res.data.parkSafe.dangerChemicalsEntCount
          this.carCount = res.data.parkSafe.carCount
          this.chemicalTypeCount = res.data.parkSafe.chemicalTypeCount
          this.overviewArr = res.data.parkEnvironment
          this.option5.xAxis[0].data = res.data.parkEnergy.xList
          this.option5.series[0].data = res.data.parkEnergy.y1List

          this.enterpriseList = res.data.monitorMap.ent
          this.monitorList = res.data.monitorMap.monitor
          this.eagleEyeList = res.data.monitorMap.eagleEye
          this.airMonitoringList = res.data.monitorMap.atmosphereMonitor
          this.waterMonitoringList = res.data.monitorMap.waterMonitor
          this.emergencySuppliesList = res.data.monitorMap.emergencySupplies
          this.searchPark('enterprise')

          this.myChart1.setOption(this.option1)
          this.myChart2.setOption(this.option2)
          this.myChart3.setOption(this.option3)
          this.myChart4.setOption(this.option4)
          this.myChart5.setOption(this.option5)
        })
        .catch(() => {})
    })
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return 'statistics-warning-row'
      } else {
        return ''
      }
    },
    activeClick (val) {
      this.active = val
      if (val === 0) {
        this.option1.yAxis.name = '亿元'
        this.option1.series[0].data = this.incomeList
      } else if (val === 1) {
        this.option1.yAxis.name = '亿元'
        this.option1.series[0].data = this.taxList
      } else if (val === 2) {
        this.option1.yAxis.name = '万元'
        this.option1.series[0].data = this.perMuTaxList
      } else if (val === 3) {
        this.option1.yAxis.name = '万元'
        this.option1.series[0].data = this.perMuAddList
      }
      this.myChart1.setOption(this.option1)
    },
    getDevelopment () {
      this.myChart1 = echarts.init(document.getElementById('development'))
      this.option1 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis'
        },
        color: ['#13B9FB'],
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        grid: {
          top: '15%',
          left: '5%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: []
          }
        ],
        yAxis: {
          type: 'value',
          name: '亿元'
        },
        series: [
          {
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              color: 'rgb(97, 133, 255)'
            },
            data: []
          }
        ]
      }
      this.myChart1.setOption(this.option1)
    },
    getDistribution () {
      let _this = this
      this.myChart2 = echarts.init(document.getElementById('distribution'))
      this.option2 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'item',
          confine: true,
          formatter: "{b}: {c} 家",
          extraCssText:'white-space:normal;word-break:break-all'
        },
        color: ['#00A3FF', '#00DBD4', '#A885F0', '#5F83FF', '#65D77B'],
        // legend: {
        //   orient: 'vertical',
        //   right: 10,
        //   top: 20,
        //   bottom: 20,
        //   type: 'scroll',
        // },
        series: [
          {
            type: 'pie',
            legendHoverLink: false,
            center: '50%',
            radius: '65%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              // 标识
              normal: {
                show: false,
                // position: 'center',
                formatter: '{d}%\n{b}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            }
          }
        ]
      }
      this.myChart2.setOption(this.option2)
      this.autoPlay(_this.myChart2, _this.option2, "startCharts2");
    },
    getWorkmanship () {
      let _this = this
      this.myChart3 = echarts.init(document.getElementById('workmanship1'))
      this.option3 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'item',
          confine: true,
          formatter: "{b}: {c} 个",
          extraCssText:'white-space:normal;word-break:break-all'
        },
        title: {
          subtext: '危险化工艺',
          left: 'center'
        },
        color: ['#00A3FF', '#00DBD4', '#A885F0', '#5F83FF', '#65D77B'],
        // legend: {
        //   orient: 'vertical',
        //   right: 5,
        //   top: 20,
        //   bottom: 20,
        //   type: 'scroll'
        // },
        series: [
          {
            type: 'pie',
            legendHoverLink: false,
            center: ['50%', '50%'],
            radius: ['30%', '60%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              // 标识
              normal: {
                show: false,
                // position: 'center',
                formatter: '{d}%\n{b}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            }
          }
        ]
      }
      this.myChart3.setOption(this.option3)
      this.autoPlay(_this.myChart3, _this.option3, "startCharts3");
    },
    getSource () {
      let _this = this
      this.myChart4 = echarts.init(document.getElementById('source1'))
      this.option4 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'item',
          confine: true,
          formatter: "{b}: {c} 个",
          extraCssText:'white-space:normal;word-break:break-all'
        },
        title: {
          subtext: '危险源',
          left: 'center'
        },
        color: ['#00A3FF', '#00DBD4', '#A885F0', '#5F83FF', '#65D77B'],
        // legend: {
        //   orient: 'vertical',
        //   right: 5,
        //   top: 20,
        //   bottom: 20,
        //   type: 'scroll'
        // },
        series: [
          {
            type: 'pie',
            legendHoverLink: false,
            center: ['50%', '50%'],
            radius: ['30%', '60%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              // 标识
              normal: {
                show: false,
                // position: 'center',
                formatter: '{d}%\n{b}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            }
          }
        ]
      }
      this.myChart4.setOption(this.option4)
      this.autoPlay(_this.myChart4, _this.option4, "startCharts4");
    },
    getSurvey () {
      this.myChart5 = echarts.init(document.getElementById('survey1'))
      this.option5 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis'
        },
        color: ['#13B9FB'],
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        legend: {
          top: 0,
          right: 0
        },
        grid: {
          left: '1%',
          top: '20%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            // boundaryGap: false,
            data: []
          }
        ],
        yAxis: {
          type: 'value',
          name: '万吨标煤',
          splitLine: {
            lineStyle: {
              color: 'rgb(141,175,221)'
            }
          }
        },
        series: [
          {
            name: '总能耗',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: 'rgb(97, 133, 255)'
            },
            data: []
          }
        ]
      }
      this.myChart5.setOption(this.option5)
    },
    makeMark (iconName, list) {
      let map = this.map
      let icon = new BMap.Icon(
        require('@/assets/img/zf/' + iconName + '.png'),
        new BMap.Size(20, 20),
        {
          imageSize: new BMap.Size(20, 20),
          imageOffset: new BMap.Size(0, 0)
        }
      )
      if (list && list.length > 0) {
        list.forEach((item) => {
          let point = new BMap.Point(item.longitude, item.latitude)
          let marker = new BMap.Marker(point, { icon: icon }) // 创建标注
          marker.setTitle(item.entName)
          map.addOverlay(marker) // 将标注添加到地图中
          window.map = map
        })
      } else {
        this.$message('暂无数据')
      }
    },
    // 搜索园区地图
    searchPark (val) {
      this.selectLegend = val
      if (this.map) {
        let map = this.map
        // 清空坐标
        map.clearOverlays()

        if (val === 'enterprise') {
          this.makeMark('enterprise-color', this.enterpriseList)
        } else if (val === 'monitor') {
          this.makeMark('monitor-color', this.monitorList)
        } else if (val === 'eagleEye') {
          if (this.eagleEyeList && this.eagleEyeList !== '') {
            window.open(this.eagleEyeList)
          } else {
            this.$message('暂无数据')
          }
        } else if (val === 'airMonitoring') {
          this.makeMark('air-color', this.airMonitoringList)
        } else if (val === 'waterMonitoring') {
          this.makeMark('water-color', this.waterMonitoringList)
        } else if (val === 'emergencySupplies') {
          this.makeMark('emergency-color', this.emergencySuppliesList)
        } else {
          this.$message('暂无数据')
        }
      }
    },
    handler ({ BMap, map }) {
      this.map = map
      map.setMapType(BMAP_NORMAL_MAP) // BMAP_HYBRID_MAP
      // map.setMapStyle({ style: 'light' })
      map.setMapStyle({
        styleJson: [{
          'featureType': 'poilabel',
          'elementType': 'labels',
          'stylers': {
            'visibility': 'off'
          }
        }, {
          'featureType': 'poilabel',
          'elementType': 'labels.icon',
          'stylers': {
            'visibility': 'off'
          }
        }, {
          'featureType': 'village',
          'elementType': 'labels',
          'stylers': {
            'visibility': 'off'
          }
        }, {
          'featureType': 'land',
          'elementType': 'geometry',
          'stylers': {
            'color': '#e7f7fcff'
          }
        }, {
          'featureType': 'scenicspots',
          'elementType': 'geometry',
          'stylers': {
            'visibility': 'off'
          }
        }]
      })
    },
    getClickInfo (e) {
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    },
    goback () {
      this.$router.push({ name: 'zfParkOverview' })
    },
    gozhihui(){
      window.open('http://10.33.60.49:9090/IIP-FRONT/entry')
    },
    // 饼状图自动播放
    autoPlay(myChart, option, timer) {
      let flag = true;
      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        flag = false;
        clearInterval(timer);
        //取消之前高亮图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });

        charPiecurrentIndex = param.dataIndex;
        //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        //高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        });

        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        });
      });

      //图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      //自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      timer = setInterval(chartHover, 2000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 2000);
          flag = true;
        }
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.main {
  background-image: url("../../../assets/img/zf/bg.png");
  background-size: 100% 100%;
}
.top {
  height: 80px;
  line-height: 60px;
  box-sizing: border-box;
  color: rgb(115, 188, 235);
  background-image: url("../../../assets/img/zf/top_bg.png");
  background-size: 100% 100%;
}
.box {
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px;
  margin-bottom: 10px;
}
.title {
  width: 100%;
  color: #1c4ca1;
  font-weight: 700;
  font-size: 16px;
}
.content {
  padding: 10px auto 0;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
  .content-body-left {
    width: 45%;
    margin-top: 10px;
  }
  .content-body-right {
    width: 55%;
  }
}
.rightTop {
  width: 100%;
  background-color: rgba(189, 220, 251, 0.7);
  opacity: 0.6;
  padding: 5px;
  border-radius: 5px;
  .rightTopBox {
    overflow: hidden;
    > div:first-child {
      float: left;
    }
    > div:last-child {
      float: right;
      color: #00a3ff;
    }
  }
}
.tabs {
  float: right !important;
  overflow: hidden;
  margin-bottom: 10px;
  > div {
    float: left;
    color: #7db2d0;
    padding: 0 7px;
    cursor: pointer;
  }
}
.selectActive {
  color: #00a3ff !important;
  font-weight: 600;
}
.content-body /deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.content-body /deep/ .el-table tr {
  background-color: transparent !important;
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
#tableColor,
#tableColor1,
#tableColor2,
#tableColor3,
#tableColor4 {
  width: 100%;
}
.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row,
.content-body #tableColor2 /deep/ .statistics-warning-row,
.content-body #tableColor3 /deep/ .statistics-warning-row,
.content-body #tableColor4 /deep/ .statistics-warning-row {
  background-color: #d6e6ff !important;
}
//滚动条的宽度
.main ::-webkit-scrollbar {
  width: 12px;
  height: 10px;
}

//滚动条的滑块
.main ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 90, 255, 0.1);
  border-radius: 5px;
}
/deep/ .BMap_cpyCtrl {
  display: none;
}
/deep/ .anchorBL {
  display: none;
}
.intrdouce {
  width: 144px;
  left: 20px;
  bottom: 20px;
  position: absolute;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  color: #ffffff;
  overflow: hidden;
  .legend-body {
    text-align: center;
    margin: 6px;
    height: 40px;
    padding: 10px 0px 10px 15px;
  }
  .legend-title {
    font-size: 15px;
    font-weight: bold;
    float: left;
    line-height: 20px;
  }
  .legend-icon {
    float: left;
    margin-right: 10px;
  }
}
.goback {
  position: absolute;
  z-index: 10;
  text-align: center;
  right:10px;
  width: 135px;
  padding: 5px 10px;
  color: #ffffff;
  cursor: pointer;
  border-radius: 20px;
  background-color: #00A8FF;
  > span {
    display: inline-block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    // background-color: #1c4ca1;
    color: #ffffff;
    text-align: center;
    margin-right: 5px;
  }
}
.content-center {
  .left_baidu {
    position: relative;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    height: 774px;
    margin: 0px auto;
  }
}
.ulList {
  margin-top: 20px;
  li {
    list-style: none;
    overflow: hidden;
    padding: 10px 0;
    border-bottom: 1px dashed #aecaf2;
    > div:first-child {
      float: left;
    }
    > div:last-child {
      float: right;
      color: #00a3ff;
    }
  }
}
.securityBottom {
  width: 100%;
  background-color: #e0ebfe;
  border-radius: 5px;
  > div {
    margin: 5px auto;

    > div {
      text-align: center;
      height: 30px;
      line-height: 30px;
    }
    > div:last-child {
      color: #4972ff;
      font-size: 20px;
    }
  }
  .securityBottomCenter {
    border-left: 1px solid #aecaf2;
    border-right: 1px solid #aecaf2;
  }
}
.overview {
  height: 50px;
  line-height: 50px;
}
</style>
